<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
通过点击按钮切换图片，显示上一张图片和下一张图片，第一张图片不显示上一页按钮，
最后一张图片不显示下一张按钮
-->

<body>
    <div id="app">
        <div class="box">
            <button v-on:click="index--" v-if="index > 0">上一张</button>
            <img v-bind:src="imgUrls[index]" :title="imgUrls[index]">
            <button v-on:click="index++" v-if="index < imgUrls.length-1">下一张</button>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imgUrls: ['./images/image1.png', './images/image2.png', './images/image3.png', './images/image4.png'],
                index: 0
            }
        })
    </script>

</body>

</html>